<template>


  <div class="backgroundDiv">

    
    <div style=" width: 100%;height: 100%;overflow: hidden;"> 

      <div style="position: absolute;width: 98%;height: 8vh;top: 2vh;left: 2vh;display: -webkit-inline-box;">
        <el-image :src="require('@/assets/images/sdu_logo.png')" style="width: 5vh;"></el-image>
        <div style="font-size: 2vw;margin-left: 0.5vh;font-family: cursive;color: #f2f2f2;">氢能经济性分析和规划设计系统</div>
      </div>


      <div class="tipsDiv" style="top: 30.5vh;left: 16vh;transform: rotate(-34deg);">
        工业副产氢
      </div>
 
      <div style="position: absolute;width: 10vh;height: 20vh;top: 20vh;left: 5vh;">
        <el-image :src="require('@/assets/images/mainPage/gyfcqBack.png')" style="width: 20vh;"></el-image>
      </div>
      
      <div class="tipsDiv" style="top: 49.5vh;left: 17vh;transform: rotate(-31deg);">
        工业副产氢
      </div>

      <div style="position: absolute;width: 10vh;height: 20vh;top: 36vh;left: 5vh;;">
        <el-image :src="require('@/assets/images/mainPage/gyfcqBack2.png')" style="width: 20vh;"></el-image>
      </div>


            
      <div class="tipsDiv" style="top: 67vh;left: 17vh;">
        新能源制氢
      </div>

      <div style="position: absolute;width: 10vh;height: 20vh;top: 57vh;left: 5vh;">
        <el-image :src="require('@/assets/images/mainPage/gfzq.png')" style="width: 22vh;"></el-image>
      </div>

      
                  
      <div class="tipsDiv" style="top: 85vh;">
        新能源制氢
      </div>
      
      <div style="position: absolute;width: 10vh;height: 20vh;top: 72vh;left: 5vh;;">
        <el-image :src="require('@/assets/images/mainPage/fnzqBack.png')" style="width: 22vh;"></el-image>
      </div>

                  
      <div class="tipsDiv" style="top: 19vh;left: 114vh;width: 17vh;">
        社区
      </div>

      <div style="position: absolute;width: 10vh;height: 20vh;top: 22vh;left: 94vh;">
        <el-image :src="require('@/assets/images/mainPage/sqBack.png')" style="width: 20vh;"></el-image>
      </div>

      <div class="tipsDiv" style="top: 39vh;left: 51vh;width: 17vh;">
        燃料电池热电联供
      </div>

      <div style="position: absolute;width: 10vh;height: 20vh;top: 41vh;left: 69vh;">
        <el-image :src="require('@/assets/images/mainPage/dcBack.png')" style="width: 20vh;"></el-image>
      </div>

                        
      <div style="position: absolute; width: 10vh;height: 20vh;top: 30vh;left: 48vh;">
        <el-image :src="require('@/assets/images/mainPage/cqBack.png')" style="width: 20vh;"></el-image>
      </div>

      <div style="position: absolute; width: 10vh;height: 20vh;top: 65vh;left: 48vh;">
        <el-image :src="require('@/assets/images/mainPage/cqBack.png')" style="width: 20vh;"></el-image>
      </div>

                


                        
      <div class="tipsDiv" style="top: 40vh;left: 114vh;width: 17vh;">
        加氢站
      </div>

      <div style="position: absolute;width: 10vh;height: 20vh;top: 22vh;left: 94vh;">
        <el-image :src="require('@/assets/images/mainPage/sqBack.png')" style="width: 20vh;"></el-image>
      </div>
                   

                  
      <div class="tipsDiv" style="top: 75vh;left: 45vh;">
        储氢站
      </div>
        
      <div style="position: absolute;width: 10vh;height: 20vh;top: 45vh; left: 95vh;">
        <el-image :src="require('@/assets/images/mainPage/cqzBack.png')" style="width: 20vh;"></el-image>
      </div>

 
      
                              
      <div class="tipsDiv" style="top: 61vh;left: 114vh;width: 17vh;">
        天然气掺氢
      </div>

      <div style="position: absolute;width: 10vh;height: 20vh;top: 64.5vh;left: 92.8vh;">
        <el-image :src="require('@/assets/images/mainPage/trqcq.png')" style="width: 22vh;"></el-image>
      </div>


                                                
      <div class="tipsDiv" style="top: 25.2vh;left: 68.6vh;width: 13vh;">
        长管拖车
      </div>
         
      
      <div style="position: absolute;width: 10vh;height: 20vh;top: 29.5vh;left: 53.8vh;">
        <el-image :src="require('@/assets/images/mainPage/car.png')" style="width: 12vh;"></el-image>
      </div>
            

      
                                    
      <div class="tipsDiv" style="top: 82.3vh;left: 73.7vh;width: 13vh;">
        长管拖车
      </div>
   
      <div style="position: absolute;width: 10vh;height: 20vh;top: 77.5vh;left: 62vh;">
        <el-image :src="require('@/assets/images/mainPage/car.png')" style="width: 12vh;"></el-image>
      </div>

                                                      
      <div class="tipsDiv" style="top: 29.2vh;left: 40.6vh;width: 13vh;">
        管道输氢
      </div>

  </div>


    <div v-show="loginShowFlag" id="login-container">

      <div style="text-align: center;margin-top: 8vh;" >
        <el-image :src="require('@/assets/images/login.png')" style=" width: 120px;height: 120px;"></el-image>
      </div>

      <el-form :model="userForm" status-icon :rules="rules" ref="userForm" label-width="120px" style="margin-top:3vh;" class="userFormCss">

        <el-form-item label=""  prop="account">
          <el-input type="text" style="width: 30vh;" prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="userForm.account" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="" prop="password">
          <el-input type="password" style="width: 30vh;"  prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="userForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item style="text-align: center;margin-top: 5vh;margin-right: 100px;text-align: left;">
          <el-button  style="width: 30vh;" type="primary" @click="submitForm('userForm')">登录</el-button>
          <span style="color: #FFF;" >还没有账号？<a  @click="register()" style="color: #1D90C5;cursor: pointer;">立即注册</a></span>
        </el-form-item>
      </el-form>

     </div>




    <div v-show="registerShowFlag" id="register-container">

      <div style="text-align: center;margin-top: 8vh;" >
        <el-image :src="require('@/assets/images/register.png')" style=" width: 120px;height: 120px;"></el-image>
      </div>

      <el-form :model="userRegisterForm" status-icon :rules="registerRules" ref="userRegisterForm" label-width="120px" style="margin-top:3vh;" class="userFormCss">

        <el-form-item label=""  prop="account">
          <el-input type="text" style="width: 30vh;" prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="userRegisterForm.account" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label=""  prop="username">
          <el-input type="text" style="width: 30vh;" prefix-icon="el-icon-user-solid" placeholder="请输入用户名" v-model="userRegisterForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="" prop="password">
          <el-input type="password" style="width: 30vh;"  prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="userRegisterForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item style="text-align: center;margin-top: 5vh;margin-right: 100px;text-align: left;">
          <el-button  style="width: 30vh;" type="primary" @click="submitRegisterForm('userRegisterForm')">注册</el-button>
          <span style="color: #FFF;" >已有账号 <a  @click="gpLogin()" style="color: #1D90C5;cursor: pointer;">立即登录</a></span>
        </el-form-item>
      </el-form>

    </div>





  </div>




</template>

<script>

  export default {
    name: 'Login',
    components: {

    },
    data() {
      var checkAccount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }else{
          callback();
        }
      };

      var checkAccount2 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }else{

          var account = this.userRegisterForm.account;

          this.$http.post("/iepsapi/login/checkAccount", {account:account}).then((res) => {
            var resultData = res.data;
            if(resultData!=null&&resultData!=""){
              return callback(new Error(resultData));
            }else{
              callback();
            }
          })

        }
      };


      var checkPassword = (rule, value, callback) => {

        if (!value) {
          return callback(new Error('密码不能为空'));
        }else{

          var account = this.userRegisterForm.account;

          this.$http.post("/iepsapi/login/checkPassWord", {account:account,password:value}).then((res) => {
            var resultData = res.data;
            if(resultData!=null&&resultData!=""){
              return callback(new Error(resultData));
            }else{
              callback();
            }
          })


        }
      };

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };

      return {
        registerShowFlag : false,
        loginShowFlag : true,
        userForm: {
          account: '',
          password: ''
        },
        userRegisterForm: {
          account: '',
          username: '',
          password: ''
        },
        rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          account: [
            { validator: checkAccount, trigger: 'blur' }
          ]
        },
        registerRules: {
          account: [
            { validator: checkAccount2, trigger: 'blur' }
          ],
          password: [
            { validator: checkPassword, trigger: 'blur' }
          ]
        },
      };
    },
    methods: {
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {

            //登录验证
            var account = _this.userForm.account;
            var password = _this.userForm.password;
            var passwordEncryption =  _this.$md5(password);

            this.$http.post("/iepsapi/login/login", {account:account,passwordEncryption:passwordEncryption}).then((res) => {
              var resultData = res.data;

              if(resultData!=null&&resultData!=""){

                var loginFlag = resultData.loginFlag;

                if(loginFlag=="success"){
                  sessionStorage.setItem("username", resultData.username);
                  sessionStorage.setItem("account", resultData.account);
                  sessionStorage.setItem("token", 'true');
                  _this.$router.push({path: "/index/table"});
                }else{
                  this.$message({
                    type: 'info',
                    message: '登录失败，请输入正确的账号和密码！'
                  });

                }

              }else{
                this.$message({
                  type: 'info',
                  message: '登录失败，请输入正确的账号和密码！'
                });

              }

            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      submitRegisterForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {

            //注册
            var account = _this.userRegisterForm.account;
            var username = _this.userRegisterForm.username;
            var password = _this.userRegisterForm.password;

            var passwordEncryption =  _this.$md5(password);

            this.$http.post("/iepsapi/login/register", {account:account,username:username,passwordEncryption:passwordEncryption}).then((res) => {
              var resultData = res.data;

              if(resultData!=null&&resultData=="success"){

                this.$message({
                  type: 'success',
                  message: '注册成功！'
                });

              }


            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      register() {
        this.loginShowFlag = false;
        this.registerShowFlag = true;

      },
      gpLogin() {
        this.loginShowFlag = true;
        this.registerShowFlag = false;
      },
    }
  }
</script>
 
<style scoped> 

.tipsDiv{
    -webkit-transform: rotate(-27deg);
    transform: rotate(-28deg);
    position: absolute;
    width: 10vh;
    height: 3vh;
    top: 31vh;
    left: 15.8vh;
    border-radius: 1vh;
    /* background-image: -webkit-gradient(linear, left top, right top, from(#2946ad), to(#61dde37a)); */
    /* background-image: linear-gradient(to right, #2946ad, #61dde37a); */
    text-align: center;
    color: #f2f2f2;
    line-height: 3vh;
    font-size: 0.8vw;
    border: 1px solid #8089ff;
}

/* 整个流动箭头的body */
.arrow-body {
position: absolute;
margin: 0;
padding: 0;
/* 这里修改整个流动箭头的长度和高度 */
width: calc(409vw * 100 / 1920);
height: calc(10vh * 100 / 1080);
overflow: hidden;
}
/* 流动的线条的body */
.flow-body {
position: relative;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
border: calc(2vh * 100 / 1080) solid #00eaf7;
}
/* 线条样式 */
.flow-body::before {
content: "";
position: absolute;
width: 200%;
/* 这里修改线条的高度，同时top减去的值是高度的一半（为了保持垂直居中） */
height: 30%;
top: 35%;
/* 这里修改线条的颜色（可以达到渐变） */
background: repeating-linear-gradient(
 90deg,
 skyblue 0,
 skyblue calc(5vw * 100 / 1920),
 #01155d calc(5vw * 100 / 1920),
 #01155d calc(10vw * 100 / 1920)
);
animation: flow linear 8s infinite;
}
/* 横向流动动画 右*/
@keyframes flow {
from {
 transform: translateX(-50%);
}
to {
 transform: translateX(0);
}
}


/* 横向流动动画 右*/
@keyframes flowRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
/* 横向流动动画 左*/
@keyframes flowLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* 纵向流动动画 下*/
@keyframes flowDown {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0%);
  }
}
/* 纵向流动动画 上*/
@keyframes flowUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-50%);
  }
} 


  body{
    margin: 0;
  }

  .backgroundDiv{
    width: 100%;
    height: 100%;
    background-image: url(../../assets/images/one-bg.png) ;
    background-repeat: no-repeat;
    background-size: cover; /* 背景图片覆盖整个div */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    
  }

  #login-container{
    background: url(../../assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    width: 55vh;
    height: 60vh;
    position: absolute;
    top: 25vh;
    left: 145vh;
    border-radius: 10px;
  }

  #register-container{
    background: url(../../assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    width: 55vh;
    height: 65vh;
    position: absolute;
    top: 25vh;
    left: 145vh;
    border-radius: 10px;
  }

  #userFormCss{
    height: 80vh;
    width: 100%;
    margin-top: 10vh;
  }

</style>
